<template>
  <div class="login-container">
    <van-nav-bar fixed title="登录">
      <!-- <template #left>
                <van-icon name="cross" />
            </template> -->

      <van-icon slot="left" name="cross" />
    </van-nav-bar>
    <van-form @submit="onSubmit">
      <van-field
        v-model="user.mobile"
        name="pattern"
        placeholder="请填写手机号"
        :rules="rules.mobile"
      >
        <i slot="left-icon" class="iconfont icon-shouji"></i>
      </van-field>
      <van-field
        v-model="user.code"
        type="text"
        name="code"
        placeholder="请填写验证码"
        :rules="rules.code"
      >
        <i slot="left-icon" class="iconfont icon-yanzhengma"></i>
        <template #button>
          <van-button @click="getCode" v-if="flag" size="small" class="sendCode"
            >发送验证码</van-button
          >
          <van-count-down @finish="finish" v-else :time="time" format="ss s" />
        </template>
      </van-field>

      <div style="margin: 16px;" class="submitBox">
        <van-button class="loginbtn" block type="info" native-type="submit">
          登录
        </van-button>
      </div>
      <div class="registerBox">
        <div class="register" @click="$router.push({ path: '/register' })">
          注册
        </div>
      </div>
    </van-form>
  </div>
</template>

<script>
import { loginApi, sendCode } from '@/api'
import { tt } from '@/utlis/storage'
export default {
  data() {
    return {
      user: {
        mobile: '17358066614',
        code: '',
      },
      time: 60 * 1000,
      flag: true,
      /* 校验 */
      rules: {
        mobile: [
          { required: true, message: '请填写手机号' },
          { pattern: /\d{11}/, message: '请填写手机号' },
        ],
        code: [
          { required: true, message: '请填写验证码' },
          { pattern: /\d{5}/, message: '请填写5位验证码' },
        ],
      },
    }
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values)
      this.login()
    },
    async login() {
      try {
        const { data: res } = await loginApi(this.user)
        //console.log(res, 6666)
        /* 
        1、将登陆后信息存储起来
          + 将数据存储到vuex中
          +  触发vuex中mutations中的函数  
          +  将获取的信息赋值给state中 的user  并且做本地缓存
          +  对state中的user的值从本地缓存中获取
        */
        this.$store.commit('setUser', res.data)
        //console.log(this, 55555)
        //  this.$toast('登录成功')
        tt('登录成功')
        this.$router.push('/my')
      } catch (err) {
        console.log(err)
      }
    },
    /* 监听时间结束 */
    finish() {
      console.log(123)
      this.flag = true
    },
    async getCode() {
      /* 点击获取验证码按钮
        1、将状态值改变
        2、发送请求 
        */
      console.log(12212)
      this.flag = false
      const { data: res } = await sendCode(this.user.mobile)
      console.log(res, 7777)
    },
  },
}
</script>
<style scoped lang="scss">
.login-container {
  padding-top: 100px;
  .van-nav-bar {
    background-color: #3296fa;
    .van-icon {
      color: #fff;
    }
    /deep/.van-nav-bar__title {
      color: #fff;
    }
  }
}
.loginbtn {
  border-radius: 22px;
  margin-top: 60px;
}
.registerBox {
  margin: 0 16px;
  /deep/.register {
    width: 100%;
    height: 44px;
    text-align: center;
    line-height: 44px;
    background-color: #4acda5;
    color: #fff;
    border-radius: 22px;
    box-shadow: 3px 0px 0px #ccc;
  }
}
.sendCode {
  background-color: #4acda5;
  color: #fff;
}
</style>
